<template>
  <div class="tools-page-wrapper">

    <!-- 导航菜单 -->
    <nav class="cli_nav new-light scene_mobile clearfix">
      <ul class="sub_nav sub_mobile_nav cli_head_container clearfix">
        <li><router-link class="t06971093650622ab_sep [navigation_text]" to="/qrcode/text" @click="StatisticsData(120,11)" title="生成文本二维码">文本</router-link></li>
        <li><router-link class="tab_sep [navigation_url]" to="/qrcode/url" @click="StatisticsData(120,12)" title="生成网址二维码">网址</router-link></li>
        <li><router-link class="tab_sep [navigation_files]" to="/qrcode/files" @click="StatisticsData(120,13)" title="生成文件二维码">文件</router-link></li>
        <li><router-link class="tab_sep [navigation_img]" to="/qrcode/img" @click="StatisticsData(120,14)" title="生成图片二维码">图片</router-link></li>
        <li><router-link class="tab_sep [navigation_multimedia]" to="/qrcode/multimedia" @click="StatisticsData(120,15)" title="生成音视频二维码">音视频</router-link></li>
        <li><router-link class="tab_sep [navigation_vcard]" to="/qrcode/vcard" @click="StatisticsData(120,16)" title="名片二维码">名片</router-link></li>
        <li><router-link class="tab_sep [navigation_weixin]" to="/qrcode/weixin" @click="StatisticsData(120,17)" title="美化微信二维码">微信</router-link></li>
        <li><router-link class="tab_sep [navigation_form]" to="/qrcode/form" @click="StatisticsData(120,124001)" title="记录表单">表单</router-link></li>
        <li><router-link class="tab_sep [navigation_batch]" to="/qrcode/batch" title="批量生码">批量生码</router-link></li>
        <li><router-link class="tab_sep on" to="/qrcode/tools" @click="StatisticsData(120,161)" title="更多高级功能">更多工具</router-link></li>
        <li class="pull-right right-nav-items none-after-form">
          <ul>
            <li class="pull-left nav-tool-popover-scan-new">
              <router-link class="template-code" data-analyze="8,118010" to="/qrcode/template" id="__index_template">
                <i class="clifont anticon-moban1"></i>
                模板库建码
              </router-link>
            </li>
          </ul>
        </li>
      </ul>
    </nav>

    <!-- 主要内容区域 -->
    <div class="wrapper new-light mobile-scene-min-width">
      <div class="page-main-content tools-container">
        <!-- 实用工具推荐 -->
        <div class="recommend">
          <h2>实用工具推荐</h2>
          <ul>
            <li>
              <a href="https://qr.ma" @click="StatisticsData(120, 201)" target="_blank">
                <div class="tools-icon shadow"></div>
                <h3>无痕生码工具</h3>
                <p>完全无痕，支持断网离线使用</p>
              </a>
            </li>
            <li>
              <a href="https://2w.ma" @click="StatisticsData(120, 146001)" target="_blank">
                <div class="tools-icon transfer"></div>
                <h3>草船文件传输</h3>
                <p>微信扫码，把手机文件快速传至电脑</p>
              </a>
            </li>
            <li>
              <router-link to="/qrcode/deqr" @click="StatisticsData(120, 200)">
                <div class="tools-icon scanCode"></div>
                <h3>解码</h3>
                <p>上传二维码或扫描后解析二维码地址</p>
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 生码工具 -->
        <h2>生码工具</h2>
        <ul>
          <li>
            <a href="//console.cli.im/nedit?create_from=83" @click="StatisticsData(1, 31)" target="_blank">
              <h3>高级编辑器</h3>
              <p>生成可自由排版，灵活组合内容的二维码</p>
            </a>
          </li>
          <li>
            <a href="mina/home.html" @click="StatisticsData(120, 171)" target="_blank">
              <h3>小程序参数码</h3>
              <p>生成任意页面小程序码</p>
            </a>
          </li>
          <li>
            <a href="origin.html" @click="StatisticsData(120, 180)" target="_blank">
              <h3>溯源二维码</h3>
              <p>制作农产品种子溯源二维码</p>
            </a>
          </li>
        </ul>

        <ul>
          <li>
            <a href="javascript:;" id="create-batch-static-code">
              <h3>批量生成静态码</h3>
              <p>选择模板，填入数据，批量生成静态码</p>
            </a>
          </li>
          <li>
            <a href="template.html" @click="StatisticsData(120, 237003)" target="_blank">
              <h3>批量生成活码</h3>
              <p>前往模板库，选择模板填入数据，批量生码</p>
            </a>
          </li>
          <li></li>
        </ul>

        <!-- 美化与标签制作 -->
        <h2>美化与标签制作</h2>
        <ul>
          <li>
            <a class="load-qrstyle" href="javascript:;" @click="StatisticsData(120, 177)">
              <h3>二维码美化排版</h3>
              <p>多种样式模板，直接应用修改</p>
            </a>
          </li>
          <li>
            <a href="javascript:;" id="create-batch-label-create">
              <h3>二维码标签制作</h3>
              <p>提供二维码标签在线制作工具， 支持批量制作</p>
            </a>
          </li>
          <li>
            <a href="print/service.html" @click="StatisticsData(120, 241)" target="_blank">
              <h3>一物一码标签印刷落地指南</h3>
              <p>提供不同场景的材质印刷建议， 打印部署经验</p>
            </a>
          </li>
        </ul>

        <!-- 解码器 -->
        <h2>解码器</h2>
        <ul>
          <li>
            <a href="javascript:;" @click="StatisticsData(120, 176)">
              <h3>上传二维码</h3>
              <p>上传后解析二维码地址</p>
              <input class="feature-item-upload uploadfile" data-uptype="deqr" id="feature-item-upload" name="Filedata" type="file"/>
            </a>
          </li>
          <li>
            <a href="javascript:;" id="deqrcamera" @click="StatisticsData(120, 175)">
              <h3>摄像头扫描</h3>
              <p>扫描后解析二维码地址</p>
            </a>
          </li>
          <li>
            <a href="https://scanbot.cli.im" @click="StatisticsData(120, 146004)" target="_blank">
              <h3>扫码机器人</h3>
              <p>让手机变成扫码枪，支持连续解码</p>
            </a>
          </li>
        </ul>

        <!-- 解码加载状态 -->
        <div class="deqr_loading">
          <a class="deqr_loading_img" href="tools.html" title="正在识别二维码"></a>
        </div>

        <div class="__type-upload-content deqr-item">
          <div class="warn-tip none">
            <i class="fa fa-exclamation-circle"></i>
            <span>无法识别出该图片中的二维码内容</span>
          </div>
        </div>

        <!-- 其他工具 -->
        <h2>其他</h2>
        <ul>
          <li>
            <a href="api.html" @click="StatisticsData(120, 183)" target="_blank">
              <h3>二维码美化API</h3>
              <p>美化模板API平台</p>
            </a>
          </li>
          <li>
            <a href="help/86460.html" @click="StatisticsData(120, 237002)" target="_blank">
              <h3>一物一码标签制作API</h3>
              <p>可对接内部系统，批量生成标签</p>
            </a>
          </li>
          <li>
            <a href="help/56845.html" @click="StatisticsData(120, 187)" target="_blank">
              <h3>表单数据推送API</h3>
              <p>推送表单数据，制作报表</p>
            </a>
          </li>
        </ul>

        <ul>
          <li>
            <a href="help/85645.html" @click="StatisticsData(120, 188)" target="_blank">
              <h3>表单数据区块链存证</h3>
              <p>可信存证每条表单记录</p>
            </a>
          </li>
          <li>
            <a href="help/53255.html" @click="StatisticsData(120, 184)" target="_blank">
              <h3>浏览器插件</h3>
              <p>二维码生成和解码快捷插件</p>
            </a>
          </li>
          <li>
            <a href="mina/enterprise.html" @click="StatisticsData(120, 189)" target="_blank">
              <h3>企业专属小程序</h3>
              <p>帮助企业搭建专属的二维码业务平台</p>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 解码结果显示 -->
    <div class="deqr_prompt">
      <p class="prompt_current"></p>
    </div>

    <div class="deqr-result none" id="deqr_result">
      <div class="copy-success-tip">复制成功</div>
      <div class="result-title">解码结果</div>
      <div class="result-content">
        <p class="result" id="deqrresult"></p>
        <div class="operate">
          <span class="copy">复制</span>
          <span class="generate">生成二维码</span>
        </div>
        <input id="uploaddeqr" type="hidden"/>
      </div>
    </div>

    <!-- 扫描模态框 -->
    <div aria-labelledby="myModalLabel" class="modal fade" id="htmlScanModal" role="dialog" tabindex="-1">
      <div class="modal-dialog" role="document">
        <div class="modal-content" style="width: 650px;">
          <div class="modal-header">
            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">二维码扫描</h4>
          </div>
          <div class="modal-body">
            <div class="scanner">
              <div class="scan-area">
                <div class="mark top-left"></div>
                <div class="mark top-right"></div>
                <div class="mark bottom-left"></div>
                <div class="mark bottom-right"></div>
              </div>
              <video height="600" id="scanVideo" width="600"></video>
            </div>
            <div id="scan-content"></div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default btn-sm" id="copyResultBtn" type="button">复制</button>
            <button class="btn btn-default btn-sm" id="continueToScan" type="button">继续扫码</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 美化样式包装器 -->
    <div class="qr-style-wrapper">
      <div class="qr-style-content">
        <div class="close">×</div>
        <div class="real-content"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'

// 定义组件名称
defineOptions({
  name: 'ToolsPage'
})

// 定义页面元信息
const metaInfo = {
  title: '更多二维码工具-草料二维码',
  meta: [
    {
      name: 'description',
      content: '更多二维码工具服务，生成小程序码，记录码和空白二维码，并支持美化微博二维码，淘宝二维码，APP二维码，提供二维码解码、美化和批量生码工具。'
    },
    {
      name: 'keywords',
      content: '二维码工具,二维码美化,二维码服务,解码,二维码扫描器,美化与打印'
    },
    {
      property: 'og:title',
      content: '更多二维码工具-草料二维码'
    },
    {
      property: 'og:description',
      content: '更多二维码工具服务，生成小程序码，记录码和空白二维码，并支持美化微博二维码，淘宝二维码，APP二维码，提供二维码解码、美化和批量生码工具。'
    },
    {
      property: 'og:image',
      content: 'https://gstatic.clewm.net/caoliao-resource/240407/6b2aef_89bd6906.png'
    }
  ],
  link: [
    { rel: 'canonical', href: 'https://cli.im/tools' },
    { rel: 'icon', href: '../../assets/images/ceba46bf2ecc.ico', type: 'image/x-icon' },
    { rel: 'shortcut icon', href: '../../assets/images/ceba46bf2ecc.ico', type: 'image/x-icon' }
  ],
  script: [
    {
      type: 'application/ld+json',
      json: {
        "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonid",
        "@id": "https://cli.im/tools",
        "title": "更多二维码工具-草料二维码",
        "description": "更多二维码工具服务，生成小程序码，记录码和空白二维码，并支持美化微博二维码，淘宝二维码，APP二维码，提供二维码解码、美化和批量生码工具。",
        "pubDate": "2025-02-10T14:37:43",
        "upDate": "2025-08-07T00:04:38"
      }
    },
    {
      type: 'application/ld+json',
      json: {
        "@context": "http://schema.org",
        "@type": "WebPage",
        "url": "https://cli.im/tools",
        "name": "更多二维码工具-草料二维码",
        "description": "更多二维码工具服务，生成小程序码，记录码和空白二维码，并支持美化微博二维码，淘宝二维码，APP二维码，提供二维码解码、美化和批量生码工具。",
        "mainEntityOfPage": "https://cli.im/tools",
        "publisher": {
          "@type": "Organization",
          "name": "草料二维码",
          "url": "https://cli.im"
        },
        "datePublished": "2025-02-10T14:37:43"
      }
    }
  ]
}

// 二维码配置
const qrConfig = reactive({
  level: "H",
  size: "280",
  bgcolor: "FFFFFF",
  forecolor: "000000",
  dotcolor_o: "000000",
  dotcolor_n: "000000",
  icon: {
    path: "",
    pos: 0,
    zoom: 0
  }
})

// 页面状态变量
const account = ref<string>('')
const tokenId = ref<string>('')
const qr_value = ref<string>("")
const qr_data = ref<string>('%7B%22info%22%3A%22%22%7D')
const is_active = ref<string>('')

// 环境变量
const ___ENV = ref<string>("online")
const _capacity_info = ref(null)

// 浏览器信息
const __NEW_BROWSER_INFO = reactive({
  ua: '',
  language: ''
})

// 清理函数集合
const cleanupFunctions = ref<Array<() => void>>([])

// 设置全局变量 - 保持与原HTML兼容性
const setGlobalVariables = (): void => {
  // 环境变量
  window.___ENV = ___ENV.value
  window.account = account.value
  window.tokenId = tokenId.value

  // 静态资源配置
  window.$_isSave = false
  window.front_url = "//static.clewm.net/nc/front"
  window.$autoVersion = "1754556853877"

  // 二维码配置
  window.QR_CONFIG = qrConfig
  window.qr_value = qr_value.value
  window.qr_data = qr_data.value
  window.is_active = is_active.value

  // 浏览器信息
  __NEW_BROWSER_INFO.ua = navigator.userAgent
  __NEW_BROWSER_INFO.language = navigator.language
  window.__NEW_BROWSER_INFO = __NEW_BROWSER_INFO
}

// 初始化基本功能
const initBasicFeatures = (): void => {
  // 设置文档属性
  document.documentElement.setAttribute('auto_version', '1754556853877')
}

// 绑定事件处理
const bindEvents = (): void => {
  nextTick(() => {
    // 美化弹窗事件
    const loadQrStyleElements = document.querySelectorAll('.load-qrstyle')
    loadQrStyleElements.forEach(element => {
      element.addEventListener('click', handleQrStyleClick)
    })

    // 关闭美化弹窗事件
    const closeQrStyleButton = document.querySelector('.qr-style-wrapper .close')
    if (closeQrStyleButton) {
      closeQrStyleButton.addEventListener('click', handleQrStyleClose)
    }

    // 文件上传事件
    const uploadElement = document.getElementById('feature-item-upload')
    if (uploadElement) {
      uploadElement.addEventListener('change', handleFileUpload)
    }

    // 摄像头扫描事件
    const cameraElement = document.getElementById('deqrcamera')
    if (cameraElement) {
      cameraElement.addEventListener('click', handleCameraScan)
    }

    // 记录清理函数
    cleanupFunctions.value.push(() => {
      loadQrStyleElements.forEach(element => {
        element.removeEventListener('click', handleQrStyleClick)
      })
      
      if (closeQrStyleButton) {
        closeQrStyleButton.removeEventListener('click', handleQrStyleClose)
      }
      
      if (uploadElement) {
        uploadElement.removeEventListener('change', handleFileUpload)
      }
      
      if (cameraElement) {
        cameraElement.removeEventListener('click', handleCameraScan)
      }
    })
  })
}

// 数据统计函数 - 简化版本
const StatisticsData = (fir: number, sec: number): void => {
  console.log('StatisticsData called:', fir, sec)

  // 简化的统计实现，保持函数签名一致
  if (typeof $ !== 'undefined' && $.ajax) {
    $.ajax({
      async: true,
      type: "get",
      url: '/Api/ClickLog/click',
      data: {
        'fir': fir,
        'sec': sec
      },
      dataType: 'jsonp',
      jsonp: 'callback',
      success: function(ret: any) {
        console.log('Statistics success:', ret)
      }
    })
  }
}

// 美化样式点击处理
const handleQrStyleClick = (): void => {
  console.log('QR Style click')
  StatisticsData(120, 177)

  // 简化实现：直接打开美化页面
  if (typeof window.MH_DOMAIN !== 'undefined') {
    window.open('//' + window.MH_DOMAIN)
  }
}

// 关闭美化弹窗
const handleQrStyleClose = (): void => {
  const wrapper = document.querySelector('.qr-style-wrapper') as HTMLElement
  if (wrapper) {
    wrapper.style.display = 'none'
  }
  document.body.style.overflow = 'auto'
}

// 文件上传处理
const handleFileUpload = (event: Event): void => {
  const target = event.target as HTMLInputElement
  console.log('File upload:', target.files)
  StatisticsData(120, 176)

  // 这里可以添加实际的文件处理逻辑
  const file = target.files?.[0]
  if (file) {
    console.log('Selected file:', file.name)
    // 实际项目中这里会处理二维码解码
  }
}

// 摄像头扫描处理
const handleCameraScan = (): void => {
  console.log('Camera scan')
  StatisticsData(120, 175)

  // 显示扫描模态框
  const modal = document.getElementById('htmlScanModal')
  if (modal && typeof $ !== 'undefined') {
    $(modal).modal('show')
  }
}

// 初始化统计
const initStatistics = (): void => {
  StatisticsData(120, 214)

  // 检查URL参数
  if (window.location.href.indexOf('qrstyle=1') >= 0) {
    nextTick(() => {
      const loadQrStyleElement = document.querySelector('.load-qrstyle') as HTMLElement
      if (loadQrStyleElement) {
        loadQrStyleElement.click()
      }
    })
    StatisticsData(120, 260)
  }
}

// 生命周期
onMounted(() => {
  setGlobalVariables()
  initBasicFeatures()
  bindEvents()
  initStatistics()
})

// 组件卸载时清理
onUnmounted(() => {
  cleanupFunctions.value.forEach(cleanup => cleanup())
  cleanupFunctions.value = []
})
</script>

<style src="../../assets/css/490815b50ee0.css" scoped/>
<style src="../../assets/css/00b58f2b8f9a.css" scoped/>
<style src="../../assets/css/e88b6e80fbce.css" scoped/>
<style src="../../assets/css/f6d6073f1386.css" scoped/>
<style src="../../assets/css/c1a2dbc35903.css" scoped/>
<style src="../../assets/css/0ff6e05882a2.css" scoped/>
<style src="../../assets/css/b76aaf663b7f.css" scoped/>
<style src="../../assets/css/5e6b9bf9fd2f.css" scoped/>
<style src="../../assets/css/e76bc4179d21.css" scoped/>
<style src="../../assets/css/2034b15460f1.css" scoped/>
<style src="../../assets/css/82dc0233b1fb.css" scoped/>
<style src="../../assets/css/5fd66d82cf52.css" scoped/>
<style src="../../assets/css/52f4b4a7ee30.css" scoped/>

<style scoped>
/* 原HTML中的内联样式 */
.mobile-scene-min-width {
  min-width: 1200px;
}

body {
  background-color: #f6f8f9 !important;
}

/* Vue组件包装器样式 */
.tools-page-wrapper {
  width: 100%;
  min-height: 100vh;
}

/* 保持原有的样式结构 */
.wrapper.new-light.mobile-scene-min-width {
  min-width: 1200px;
}

/* 工具页面特殊样式 */
.tools-container {
  /* 保持原有样式 */
}

.recommend h2 {
  /* 保持原有样式 */
}

.recommend ul {
  /* 保持原有样式 */
}

.tools-icon.shadow,
.tools-icon.transfer,
.tools-icon.scanCode {
  /* 保持原有图标样式 */
}

/* 解码相关样式 */
.deqr_loading {
  /* 保持原有样式 */
}

.deqr-result {
  /* 保持原有样式 */
}

.result-wrap {
  /* 保持原有样式 */
}

/* 模态框样式 */
.modal {
  /* 保持原有Bootstrap模态框样式 */
}

/* 美化样式包装器 */
.qr-style-wrapper {
  /* 保持原有样式 */
}

/* 响应式样式保持 */
@media (max-width: 1199px) {
  .mobile-scene-min-width {
    min-width: auto;
  }
}

/* 确保所有原有的CSS类和ID选择器都能正常工作 */
</style>
